<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div v-bind:title="title" id="app">
        <div v-bind:class="{active:isShow}">{{name}}</div>
        <hr>
        <div v-if="isShow">看我是否在页面使用（v-if）</div>
        <hr>
        <ol v-show="true">
            <li v-for="info in someArr">{{info.info}}</li>
        </ol>
        <hr>
        <div>{{title}}</div>
        <button v-on:click="reverseTitle">点我反转</button>
        <hr>
        <span>{{name}}</span>
        <input v-model="name" type="text">
        <hr>
        <sapn>{{innerHtml}}</sapn>--> <sapn v-html="innerHtml"></sapn>
        <form action="" v-on:submit.prevent="onSubmit"><input type="text"><button type="submit">提交</button></form>
        <hr>
        <div :title="reverseTitle1">过滤器小于10加0 {{2*3 | addZero}}</div>
        <hr>
        <div v-bind:class="['active','errorClass']">class&&style</div>
        <hr>
        <template v-if="true">
            <div>我是要隐藏的1号</div>
            <div>我是要隐藏的2号</div>
            <div>我是要隐藏的3号</div>
        </template>
        <hr>
        <template v-if="login==='name'">
            <label for="name">用户名：</label>
            <input id="name" type="text" :key="login">
        </template>
        <template v-else>
            <label for="email">邮箱：</label>
            <input id="email" type="text" :key="login">
        </template>
        <button @click="toggerLogin">切换登陆方式</button>
        <div>{{login}}</div>

    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                name:"测试",
                title:"我在悬停。。。",
                isShow:true,
                login:"name",
                innerHtml:"<span>使用v-html</span>",
                someArr:[
                    {info:"我是信息一号"},
                    {info:"我是信息二号"},
                    {info:"我是信息三号"},
                    {info:"我是信息四号"}
                ]
            },
            methods:{
                reverseTitle(){
                    this.title=this.title.split("").reverse().join("");
                    this.someArr.push({info:"我是信息五号"});
                },
                onSubmit(){
                    console.log("我是修饰符v-on:submit.prevent=验证方法")
                },
                toggerLogin(){
                    console.log(this.login ==="name");
                    this.login = this.login ==="name" ? "email":"name";
                }
            },
            filters:{
                addZero(num){
                    return num>10 ? num:"0"+num
                }
            },
            computed:{
                reverseTitle1(){
                    return this.title.split("").reverse().join("");
                }
            },
            created(){
                console.log("生命周期created....");
            }
        })
    </script>
</body>
</html>